<template>

        <el-container>
            <el-aside :width="menuCollapse ? '65px':'200px'">
             <!-- 侧边 -->
                <el-menu
                  background-color="#545c64"
                  text-color="#fff"
                   :collapse="menuCollapse"
                   :collapse-transition="false"
                  active-text-color="#ffd04b"
                  :router ="true"
                  >
                   <el-menu-item index="1" :style="{width:menuCollapse ? '65px':'200px'}">
                    <i class="el-icon-menu"></i>
                    <span slot="title">首页</span>
                  </el-menu-item>
                  <el-submenu index="2"  :style="{width:menuCollapse ? '65px':'200px'}">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>内容管理</span>
                    </template>

                    <el-menu-item index="/articleadd">发布文章</el-menu-item>
                    <el-menu-item index="/article">文章列表</el-menu-item>
                    <el-menu-item index="2-3">评论列表</el-menu-item>
                    <el-menu-item index="/material">素材管理</el-menu-item>

                  </el-submenu>
                  <el-menu-item index="/fans"  :style="{width:menuCollapse ? '65px':'200px'}">
                    <i class="el-icon-menu" ></i>
                    <span slot="title">粉丝管理</span>
                  </el-menu-item>
                  <el-menu-item index="/account"  :style="{width:menuCollapse ? '65px':'200px'}">
                    <i class="el-icon-setting"></i>
                    <span slot="title">账户信息</span>
                  </el-menu-item>
                </el-menu>
              </el-aside>

            <el-container>
                <!-- 头部 -->
                <el-header>
                    <div class="right">
                         <el-input placeholder="请输入搜索的文章"></el-input>
                            <span>消息</span>
                            <el-col :span="12">

                                <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                     <img :src="photo" alt="">
                                    <div class="user" style="color:black; width:100px;">{{name}}<i class="el-icon-arrow-down el-icon--right"></i></div>

                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-plus">个人信息</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-circle-plus">git地址</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="logout()">退出</el-dropdown-item>

                                </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                    </div>
                    <div class="left">
                          <i
                            :class="menuCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
                            style="font-size:25px;cursor:pointer; text-align: center;" @click="menuCollapse=!menuCollapse">
                          </i>
                         <span>江苏传智播客教育科技股份有限公司</span>
                    </div>

                </el-header>
                <!-- 显示 -->
                <el-main>
                   <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

</template>

<script>
export default {
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
    name () {
      // 不要直接通过sessionstorage获取数据,转而通过vuex获取
      // return window.sessionStorage.getItem('name')

      return this.$store.state.name
    },
    photo () {
      // return window.sessionStorage.getItem('photo')
      return this.$store.state.photo
    }

  },
  data () {
    return {
      menuCollapse: false
    }
  },
  methods: {
    logout () {
      this.$confirm('确认要退出系统么?', '退出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      // 清除sessionStorage信息
      //  window.sessionStorage.clear()
        this.$store.commit('clearNamePhoto')
        // 跳转到登录页面
        this.$router.push({ name: 'login' })
      }).catch(() => { })
    }
  }
}

</script>

<style lang="less" scoped>

.el-container {

  height:100%;
  .el-aside {
    background-color: #323745;
  }
  .el-header{
    background-color: gray;
    .right {
        float: right;
        width: 500px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
            width: 100px;
            margin: 0px 10px;
        }
        .el-dropdown {
            width:170px;
        }
        img {
            width: 40px;
            height: 40px;
            margin: 10px 0px;
            border-radius: 100%;
        }
        .user {
            float: right;
            height: 60px;
            line-height: 60px;
        }
    }
    .left {
        width: 400px;
        float: left;
        height: 60px;
        line-height: 60px;
    }
  }
  .el-main{
    background-color: #eee;
  }
}
</style>
